<template>
  <!--忘记密码-->
  <el-dialog 
    v-model="state.forgetPasswordDialog" 
    title="忘记密码" 
    width="30%"
    >
    <el-form label-width="auto" class="login-form" :label-position="labelPosition" :rules="rules">
      <el-form-item label="请输入注册账号" prop="account">
        <el-input v-model="forgetData.account" placeholder="请在这里输入注册账号" />
      </el-form-item>
      <el-form-item label="请输入个人邮箱" prop="email">
        <el-input v-model="forgetData.email" placeholder="请在这里输入个人邮箱"/>
      </el-form-item>
    </el-form> 
    <!--弹窗底部内容-->
     <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.forgetPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="openChangePassword">下一步</el-button>
        </span>
      </template>
  </el-dialog>
  <!--修改密码-->
   <el-dialog 
    v-model="state.changePasswordDialog" 
    title="修改密码" 
    width="30%"
    >
    <el-form label-width="auto" class="login-form" :label-position="labelPosition" :rules="rules">
      <el-form-item label="请输入您的新密码" prop="account">
        <el-input v-model="forgetData.password" placeholder="输入您的新密码" />
      </el-form-item>
      <el-form-item label="请再次输入您的新密码" prop="repassword">
        <el-input v-model="forgetData.repassword" placeholder="再次确认您的密码"/>
      </el-form-item>
    </el-form> 
    <!--弹窗底部内容--> 
     <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.changePasswordDialog = false">取消</el-button>
          <el-button type="danger" >确定</el-button>
        </span>
      </template>
  </el-dialog>
</template>
<script lang="ts" setup> 
import { reactive, ref } from 'vue'
  //表单对齐方式
  const labelPosition = ref('top')
  //表单对象接口
  interface forgetData {
    account: string,
    email: string,
    password: string,
    repassword: string
  }
  //表单对象
  const forgetData = reactive({
    account: '',
    email: '',
    password: '',
    repassword: ''
  })
  //表单规则
  const rules = reactive({
    account: [
      { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
    ],
    repassword: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' },
    ],
  })
 
  const state = reactive({
    forgetPasswordDialog:false,
    changePasswordDialog:false
  })
  const open=()=>{
    state.forgetPasswordDialog=true
  }
 const openChangePassword =()=>{
    state.forgetPasswordDialog=false
    state.changePasswordDialog=true
  }
  defineExpose({
    open
  })
</script>
<style lang="scss" scoped>

</style>